<template>
  <div :id="id" class="wt-chart" :style="{ height: height, width: width }" />
</template>

<script>
const elementResizeDetectorMaker = require('element-resize-detector')
let erd = elementResizeDetectorMaker()
import * as echarts from 'echarts'
import { generateUUID } from '@/utils/index'
import echartsSettings from '@/echarts-settings'
const { loading } = echartsSettings
export default {
  components: {},
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    type: {
      // 用于判断是否需要滚动
      type: String,
      default: ''
    }
  },
  data() {
    return {
      id: '',
      oBox: null, // 保存dom元素
      myChart: null, // 保存echarts实例
      hasData: false // true:说明有数据 false:说明没有数据
    }
  },
  computed: {},
  watch: {},
  created() {
    this.id = generateUUID() // 保证id是唯一的
  },
  mounted() {
    // 1.获取dom元素
    this.oBox = document.getElementById(this.id)
    // 2.实例化echarts
    this.myChart = echarts.init(this.oBox)
    // 3. 监听元素大小变化 触发resize
    erd.listenTo(this.oBox, () => {
      this.chartResize()
      console.log('reisze')
    })
  },
  activated() {},
  deactivated() {},
  updated() {},
  destroyed() {
    if (!this.myChart) {
      return
    }
    // 1.销毁echarts实例对象
    this.myChart.dispose()
    this.myChart = null
    // 2.移除resize事件(因为这个事件是全局的)
    window.removeEventListener('resize', this.chartResize)
  },
  methods: {
    initChart(option) {
      // 1.判断myChart实例是否存在,不存在的话重新实例化
      if (!this.myChart) {
        this.myChart = echarts.init(this.oBox)
      }
      // 2.判断是否有数据
      this.hasData = !this.isEmptyObject(option)
      // 3.有数据的情况
      if (this.hasData) {
        // 1.先清空数据
        if (this.type !== 'scroll') {
          this.myChart.clear() // 如果是滚动图, 需要该行代码; 如果不是滚动图, 不需要该行代码
        }
        // 2.初始化数 显示图表
        this.myChart.setOption(option)
        // 3.图表自适应
        window.addEventListener('resize', this.chartResize)
      } else {
        // 4.没有数据的情况
        this.oBox.removeAttribute('_echarts_instance_')
        this.oBox.innerHTML =
          '<div class="no-data" style="text-align: center;font-size: 40px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-weight: 500;color: #fff;">暂无数据</div>'
        // 同时 把myChart 置为空对象
        this.myChart = null
      }
    },
    isEmptyObject(obj) {
      return Object.keys(obj).length === 0
    },
    setInit(option) {
      // 1.判断myChart实例是否存在
      this.myChart || (this.myChart = echarts.init(this.oBox))
      this.myChart.clear()
      this.myChart.setOption(option)
      this.myChart.resize()
    },
    showLoading() {
      // 1.判断myChart实例是否存在
      this.myChart || (this.myChart = echarts.init(this.oBox))
      this.myChart.showLoading(loading)
    },
    hideLoading() {
      // 1.判断myChart实例是否存在
      this.myChart || (this.myChart = echarts.init(this.oBox))
      this.myChart.hideLoading()
    },
    // 图表重绘方法
    chartResize() {
      this.myChart && this.myChart.resize()
    }
  },
  filter() {}
}
</script>
<style scoped>
.wt-chart {
  position: relative;
}
</style>
